<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleCancel" title="选择商品分组" width="700px">
      <div>
        <el-input v-model="keyWord" placeholder="请输入商品名称" style="width:300px;" />
        <el-button icon="el-icon-search">搜索</el-button>
      </div>
      <div class="table-box">
        <el-table
          :data="articleGroupList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          class="textRadio"
          style="width: 100%;"
          @row-click="clickRow"
        >
          <el-table-column width="50" align="center">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="selectId" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="分组名称" />
          <el-table-column prop="articleNum" label="商品数" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="right" />
        </el-table>
        <div v-if="articleGroupList.length>5" class="block" style="margin:20px 0;">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="articleGroupList.length"
            background
            layout=" prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      keyWord: '',
      selectId: '',
      selectName: '',
      selectLink: '',
      currentPage: 1,
      pageSize: 5,
      articleGroupList: [
        {
          id: '122',
          name: '首页',
          articleNum: '18',
          createTime: '2019-06-03 13:16',
          link: 'www.baidu.com'
        },
        {
          id: '125',
          name: '商品详情页',
          articleNum: '11',
          createTime: '2019-06-03 13:16',
          link: 'www.baidu.com'
        }
      ]
    }
  },
  methods: {
    clickRow(row) {
      this.selectId = row.id;
      this.selectName = row.name;
      this.selectLink = row.link
    },
    // 分页设置
    handleCurrentChange(arg) {
      this.currentPage = arg
    },
    handleCancel() {
      this.$emit('cancelClick')
    },
    handleConfirm() {
      if (!this.selectName) {
        this.$message.warning('请选择商品');
        return
      }
      this.$emit('confirmClick', {
        'id': this.selectId,
        'name': this.selectName,
        'link': this.selectLink
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.textRadio {
  /deep/.el-radio__label {
    display: none;
  }
}
.table-box {
  margin-top: 20px;
  max-height: 500px;
  overflow: auto;
}
</style>
